<template>
    <!-- 横向布局 -->
    <div
        :class="{
      fixed: fixedHeader,
      'no-tabs-bar': !showTabs,
    }"
        class="vab-layout-horizontal"
    >
        <div
            :class="{
        'fixed-header': fixedHeader,
      }"
            class="vab-layout-header"
        >
            <vab-header/>
            <div
                v-show="showTabs"
                :class="{
          'vab-tabs-horizontal': showTabs,
        }"
            >
                <div class="vab-main">
                    <vab-tabs/>
                </div>
            </div>
        </div>
        <div class="vab-main main-padding">
            <vab-app-main/>
        </div>
    </div>
</template>

<script lang="ts">
import Vue from "vue";
import {Component, Prop} from 'vue-property-decorator';

@Component({})
export default class VabLayoutHorizontal extends Vue {
    @Prop({type: Boolean, default: false})
    private collapse;

    @Prop({type: Boolean, default: true})
    private fixedHeader;

    @Prop({type: Boolean, default: true})
    private showTabs;

    @Prop({type: String, default: 'desktop'})
    private device;
}
</script>

<style lang="scss" scoped>
.vab-layout-horizontal {
    ::v-deep {
        .vab-main {
            width: 92% !important;
            margin: auto;
        }
    }

    .vab-tabs-horizontal {
        background: $base-color-white;
        box-shadow: $base-box-shadow;
    }

    .vab-nav {
        .fold-unfold {
            display: none;
        }
    }
}
</style>
